import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { filterMonth, getAveScore } from '../lib/publicMethod';
import VCData from '../interface/VCData';

interface IProps {
  data: VCData[],
  min: number
}
export default function MonthLine(props: IProps) {
  const el = useRef<HTMLDivElement | null>(null)
  const ec = useRef<echarts.ECharts | null>(null)
  const { data } = props
  useEffect(() => {
    ec.current = echarts.init(el.current as HTMLDivElement)
  }, [])
  useEffect(() => {
    //按月画图
    (ec.current as echarts.ECharts).setOption({
      legend: {
        data: ['总分平均值']
      },
      xAxis: {
        data: ['七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value',
        min: props.min,
        max: 100
      },
      series: [{
        name: '总分平均值',
        type: 'line',
        data: [
          getAveScore(filterMonth(data as [], '七月')) || '-',
          getAveScore(filterMonth(data as [], '八月')) || '-',
          getAveScore(filterMonth(data as [], '九月')) || '-',
          getAveScore(filterMonth(data as [], '十月')) || '-',
          getAveScore(filterMonth(data as [], '十一月')) || '-',
          getAveScore(filterMonth(data as [], '十二月')) || '-',
        ],
        label: {
          show: true
        },
        connectNulls: true
      }]
    });
  }, [data, props.min])
  return (
    <div className="show" ref={el}></div>
  )
}
